<template>
    <div class="add-shop">
        <div class="add-shop-card">
            <Row :gutter="16">
                <Col span="12">
                    <Card>
                        <p slot="title">
                            <Icon type="android-hand"></Icon> 店铺信息
                        </p>
                        <!--表单-->
                        <div class="add-shop-form">
                            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="85">
                                <FormItem v-if="!isEdit" label="登录账号" prop="loginName">
                                    <Input class="xiao" v-model="formValidate.loginName" placeholder="请输入登录账号"></Input>
                                </FormItem>
                                <FormItem v-if="!isEdit"  label="登录密码" prop="loginPwd">
                                    <Input class="xiao" v-model="formValidate.loginPwd" type="password" placeholder="请输入登录密码"></Input>
                                </FormItem>
                                <FormItem v-if="!isEdit"  label="确认密码" prop="loginPwd_t">
                                    <Input class="xiao" v-model="formValidate.loginPwd_t" type="password" placeholder="请再次输入登录密码"></Input>
                                </FormItem>
                                <FormItem label="店铺编号" prop="shopSn">
                                    <Input class="xiao" v-model="formValidate.shopSn" placeholder="请输入店铺编号"></Input>
                                </FormItem>
                                <FormItem label="店铺名称" prop="shopName">
                                    <Input class="xiao" v-model="formValidate.shopName" placeholder="请输入店铺名称"></Input>
                                </FormItem>
                                <FormItem v-if="!isEdit"  label="店主手机" prop="userPhone">
                                    <Input class="xiao" v-model="formValidate.userPhone" placeholder="请输入店主手机"></Input>
                                </FormItem>
                                <FormItem v-if="!isEdit"  label="店主姓名" prop="userName">
                                    <Input class="xiao" v-model="formValidate.userName" placeholder="请输入店主姓名"></Input>
                                </FormItem>
                                <FormItem label="公司名称" prop="shopCompany">
                                    <Input class="xiao" v-model="formValidate.shopCompany" placeholder="请输入公司名称"></Input>
                                </FormItem>
                                <FormItem label="是否自营">
                                    <i-switch v-model="formValidate.isSelf" size="large">
                                        <span slot="open">是</span>
                                        <span slot="close">否</span>
                                    </i-switch>
                                </FormItem>
                                <FormItem label="店铺电话" prop="shopTel">
                                    <Input class="xiao" v-model="formValidate.shopTel" placeholder="请输入店铺电话"></Input>
                                </FormItem>
                                <FormItem label="QQ" prop="shopQQ">
                                    <Input class="xiao" v-model="formValidate.shopQQ" placeholder="请输入QQ"></Input>
                                </FormItem>
                                <FormItem label="所属地区">
                                    <Row>
                                        <Col span="8">
                                            <FormItem prop="areaId1">
                                                <Select clearable v-model="formValidate.areaId1" placeholder="请选择省" @on-change="getAreaId2">
                                                    <Option v-for="(value,key) in areaId1List" :value="value.areaid">{{value.areaname}}</Option>
                                                </Select>
                                            </FormItem>
                                        </Col>
                                        <Col span="8">
                                            <FormItem prop="areaId2">
                                                <Select clearable v-model="formValidate.areaId2" placeholder="请选择市"  @on-change="getAreaId3">
                                                    <Option v-for="(value,key) in areaId2List" :value="value.areaid">{{value.areaname}}</Option>
                                                </Select>
                                            </FormItem>
                                        </Col>
                                        <Col span="8">
                                            <FormItem prop="areaId3">
                                                <Select clearable v-model="formValidate.areaId3" placeholder="请选择区、县">
                                                    <Option v-for="(value,key) in areaId3List" :value="value.areaid">{{value.areaname}}</Option>
                                                </Select>
                                            </FormItem>
                                        </Col>
                                    </Row>
                                </FormItem>
                                <FormItem label="详细地址" prop="shopAddress">
                                    <Input class="xiao" v-model="formValidate.shopAddress" placeholder="请输入店铺详细地址"></Input>
                                </FormItem>
                                <FormItem label="配送区">
                                    <Tree style="position: relative;top: -8px" ref="tree" :data="dataTree" show-checkbox multiple></Tree>
                                </FormItem>
                                <FormItem label="所属行业" prop="goodsCatId">
                                    <Select class="xiao" clearable v-model="formValidate.goodsCatId" placeholder="请选择行业">
                                        <Option v-for="(value,key) in hangyeList" :value="value.catid">{{value.catname}}</Option>
                                    </Select>
                                </FormItem>
                                <FormItem label="开户行" prop="bankId">
                                    <Select class="xiao" clearable v-model="formValidate.bankId" placeholder="请选择开户行">
                                        <Option v-for="(value,key) in bankIdList" :value="value.bankid">{{value.bankname}}</Option>
                                    </Select>
                                </FormItem>
                                <FormItem label="银行卡号" prop="bankNo">
                                    <Input class="xiao" v-model="formValidate.bankNo" placeholder="请输入银行卡号"></Input>
                                </FormItem>
                                <FormItem label="持卡人姓名" prop="bankUserName">
                                    <Input class="xiao" v-model="formValidate.bankUserName" placeholder="请输入持卡人姓名"></Input>
                                </FormItem>
                            </Form>
                            <!--上传图片-->
                            <Row :gutter="5">
                                <Col span="12">
                                    <Card>
                                        <p slot="title">
                                            <Icon type="ios-cloud-upload"></Icon> 店铺图标 <a class="clear" @click="formValidate.shopImg=''">清除</a>
                                        </p>
                                        <div class="upimgCon">
                                            <Upload style="width: 100%;margin-top: 9px" v-if="formValidate.shopImg==''" accept="image/png, image/jpeg, image/gif, image/jpg" type="drag" action="?"
                                                    :before-upload="upShopImg">
                                                <div class="upImg">
                                                    <a>
                                                        <Icon type="ios-cloud-upload" size="52"></Icon>
                                                    </a>
                                                    <p>点击或将图片拖拽到这里上传</p>
                                                </div>
                                            </Upload>
                                            <img v-else :src="formValidate.shopImg"/>
                                        </div>
                                    </Card>
                                </Col>
                                <Col span="12">
                                    <Card>
                                        <p slot="title">
                                            <Icon type="ios-cloud-upload"></Icon> 营业执照 <a class="clear" @click="formValidate.zhizhaoImage=''">清除</a>
                                        </p>
                                        <div class="upimgCon">
                                            <Upload style="width: 100%;margin-top: 9px" v-if="formValidate.zhizhaoImage==''" accept="image/png, image/jpeg, image/gif, image/jpg" type="drag" action="?"
                                                    :before-upload="upZhizhaoImage">
                                                <div class="upImg">
                                                    <a>
                                                        <Icon type="ios-cloud-upload" size="52"></Icon>
                                                    </a>
                                                    <p>点击或将图片拖拽到这里上传</p>
                                                </div>
                                            </Upload>
                                            <img v-else :src="formValidate.zhizhaoImage"/>
                                        </div>
                                    </Card>
                                </Col>
                            </Row>
                            <Row :gutter="5" style="margin-top: 15px">
                                <Col span="12">
                                    <Card>
                                        <p slot="title">
                                            <Icon type="ios-cloud-upload"></Icon> 身份证(正面) <a class="clear" @click="formValidate.idImageZheng=''">清除</a>
                                        </p>
                                        <div class="upimgCon">
                                            <Upload style="width: 100%;margin-top: 9px" v-if="formValidate.idImageZheng==''" accept="image/png, image/jpeg, image/gif, image/jpg" type="drag" action="?"
                                                    :before-upload="upIdImageZheng">
                                                <div class="upImg">
                                                    <a>
                                                        <Icon type="ios-cloud-upload" size="52"></Icon>
                                                    </a>
                                                    <p>点击或将图片拖拽到这里上传</p>
                                                </div>
                                            </Upload>
                                            <img v-else :src="formValidate.idImageZheng"/>
                                        </div>
                                    </Card>
                                </Col>
                                <Col span="12">
                                    <Card>
                                        <p slot="title">
                                            <Icon type="ios-cloud-upload"></Icon> 身份证(反面) <a class="clear" @click="formValidate.idImageFan=''">清除</a>
                                        </p>
                                        <div class="upimgCon">
                                            <Upload style="width: 100%;margin-top: 9px" v-if="formValidate.idImageFan==''" accept="image/png, image/jpeg, image/gif, image/jpg" type="drag" action="?"
                                                    :before-upload="upIdImageFan">
                                                <div class="upImg">
                                                    <a>
                                                        <Icon type="ios-cloud-upload" size="52"></Icon>
                                                    </a>
                                                    <p>点击或将图片拖拽到这里上传</p>
                                                </div>
                                            </Upload>
                                            <img v-else :src="formValidate.idImageFan"/>
                                        </div>
                                    </Card>
                                </Col>
                            </Row>
                        </div>
                    </Card>
                </Col>
                <Col span="12">
                    <Card>
                        <p slot="title">
                            <Icon type="earth"></Icon> 店铺地图 <a>经度: {{lnglat[0]}} 纬度: {{lnglat[1]}} (添加店铺时候请仔细选择)</a>
                        </p>
                        <!--表单-->
                        <div class="add-shop-map">
                            <vueAmap @getOption="getOption" ref="vueAmap"></vueAmap>
                        </div>
                    </Card>
                </Col>
            </Row>
            <div class="btnFooter">
                <ButtonGroup >
                    <Button type="primary" @click="subFrom" :loading="loading">提交</Button>
                    <Button type="primary" @click="resetForm">重置</Button>
                </ButtonGroup>
            </div>
        </div>
    </div>
</template>

<script>
    import vueAmap from "../../../my-components/map/map"
    export default {
        name: "add-shop",
        components:{ vueAmap },
        data(){
            return{
                areaId1List:[],//省级
                areaId2List:[],//市级
                areaId3List:[],//县
                hangyeList:[],//所属行业列表
                bankIdList:[],//开户行列表
                lnglat:["",""],//经纬度
                formValidate: {
                    loginName: '',
                    loginPwd:"",
                    loginPwd_t:"",
                    shopSn:"",
                    shopName:"",
                    userName:"",
                    userPhone:"",
                    shopCompany:"",
                    isSelf:true,
                    shopTel:"",
                    shopQQ:"",
                    areaId1:"",
                    areaId2:"",
                    areaId3:"",
                    shopAddress:"",
                    goodsCatId:"",
                    bankId:"",
                    bankNo:"",
                    bankUserName:"",
                    shopImg:"",
                    zhizhaoImage:"",
                    idImageZheng:"",
                    idImageFan:"",
                },
                ruleValidate: {
                    loginName: [
                        { required: true, message: '请输入登录账号', trigger: 'blur' }
                    ],
                    loginPwd: [
                        { required: true, message: '请输入登录密码', trigger: 'blur' }
                    ],
                    loginPwd_t: [
                        { required: true, message: '请再次输入登录密码', trigger: 'blur' }
                    ],
                    shopSn: [
                        { required: true, message: '请输入店铺编号', trigger: 'blur' }
                    ],
                    shopName: [
                        { required: true, message: '请输入店铺名称', trigger: 'blur' }
                    ],
                    userName: [
                        { required: true, message: '请输入店主姓名', trigger: 'blur' }
                    ],
                    userPhone: [
                        { required: true, message: '请输入店主手机', trigger: 'blur' }
                    ],
                    shopCompany: [
                        { required: true, message: '请输入公司名称', trigger: 'blur' }
                    ],
                    shopTel: [
                        { required: true, message: '请输入店铺电话', trigger: 'blur' }
                    ],
                    shopQQ: [
                        { required: true, message: '请输入QQ', trigger: 'blur' }
                    ],
                    areaId1: [
                        { required: true, message: '请选择省', trigger: 'change' }
                    ],
                    areaId2: [
                        { required: true, message: '请选择市', trigger: 'change' }
                    ],
                    areaId3: [
                        { required: true, message: '请选择区、县', trigger: 'change' }
                    ],
                    shopAddress: [
                        { required: true, message: '请输入店铺详细地址', trigger: 'blur' }
                    ],
                    goodsCatId: [
                        { required: true, message: '请选择行业', trigger: 'change' }
                    ],
                    bankId: [
                        { required: true, message: '请选择开户行', trigger: 'change' }
                    ],
                    bankNo: [
                        { required: true, message: '请输入银行卡号', trigger: 'blur' }
                    ],
                    bankUserName: [
                        { required: true, message: '请输入持卡人姓名', trigger: 'blur' }
                    ],
                },
                dataTree: [],
                loading:false,
                isEdit:false,
            }
        },
        mounted(){
            this.getAreaId1()//获取省
            this.getGoodsCatId()//获取行业
            this.getBankId()//开户行
            this.getTreeData()//获取树形菜单
            if(this.$route.query.id){
                this.isEdit=true
                this.getOneData()
            }else{

            }
        },
        methods:{
            //获取修改信息
            getOneData(){
                this.getJsonData("Shops/getOneShop",{shopId:this.$route.query.id})
                    .then((res)=>{
                        this.formValidate.shopSn=res.data.shopsn
                        this.formValidate.shopName=res.data.shopname
                        this.formValidate.shopCompany=res.data.shopcompany
                        this.formValidate.isSelf=res.data.isself=="1"?true:false
                        this.formValidate.shopTel=res.data.shoptel
                        this.formValidate.shopQQ=res.data.qqno
                        this.formValidate.areaId1=res.data.areaid1
                        this.formValidate.areaId2=res.data.areaid2
                        this.formValidate.areaId3=res.data.areaid3
                        this.formValidate.shopAddress=res.data.shopaddress
                        this.formValidate.goodsCatId=res.data.goodscatid1
                        this.formValidate.bankId=res.data.bankid
                        this.formValidate.bankNo=res.data.bankno
                        this.formValidate.bankUserName=res.data.bankusername
                        this.formValidate.shopImg=res.data.shopimg
                        this.formValidate.zhizhaoImage=res.data.shiming.zhizhaoimage
                        this.formValidate.idImageZheng=res.data.shiming.idimagezheng
                        this.formValidate.idImageFan=res.data.shiming.idimagefan
                    })
            },
            //获取配送区
            getTreeData(){
                this.getJsonData("Shops/getAllAreas")
                    .then((res)=>{
                        this.dataTree = res.data
                    })
            },
            //获取一级地址
            getAreaId1(){
                this.getJsonData("Areas/getAreas",{parentId:""})
                    .then((res)=>{
                        this.areaId1List = res.data
                    })
            },
            //获取二级地址
            getAreaId2(){
                if(this.formValidate.areaId1!==""){
                    this.getJsonData("Areas/getAreas",{parentId:this.formValidate.areaId1})
                        .then((res)=>{
                            this.areaId2List = res.data
                        })
                }else{
                    this.areaId2List = []
                    this.areaId3List = []
                }
            },
            //获取三级地址
            getAreaId3(e){
                if(this.formValidate.areaId2!==""){
                    this.getJsonData("Areas/getAreas",{parentId:this.formValidate.areaId2})
                        .then((res)=>{
                            this.areaId3List = res.data
                            this.getLnglatdata(e)
                        })
                }else{
                    this.areaId3List = []
                }
            },
            //获取所属行业
            getGoodsCatId(){
                this.getJsonData("Shops/getHangye")
                    .then((res)=>{
                        this.hangyeList = res.data
                    })
            },
            //获取开户行
            getBankId(){
                this.getJsonData("Shops/getBank")
                    .then((res)=>{
                        this.bankIdList = res.data
                    })
            },
            //获取经纬度
            getOption(val){
                this.lnglat=val
            },
            //根据选择地址，查看经纬度
            getLnglatdata(e){
                let city = ""
                this.areaId2List.forEach((value,key)=>{
                    if(value.areaid==e)city = value.areaname
                })
                this.$http.get("https://restapi.amap.com/v3/place/text",{
                    params:{
                        key:"0a958544ba678367633c15a1c83539f9",
                        types:"地市级地名",
                        city:city,
                        citylimit:true,
                    }
                }).then((res) => {
                    if(res.data.status == 1){
                        this.$refs.vueAmap.setOption(res.data.pois[0].location.split(","))
                    }
                })
            },
            //上传店铺图标
            upShopImg(file) {
                if ((Math.round(file.size / 1024 * 100) / 100) < 3000) {
                    this.caijianImg(file,"shopImg")
                } else {
                    this.$Notice.error({
                        title: '文件过大',
                        desc: '文件 ' + file.name + '/' + (Math.round(file.size / 1024 * 100) / 100) + 'KB' + '，请上传 3M 以内的图片。',
                        duration: 4.5
                    });
                }
                //禁止默认上传
                return false
            },
            //上传营业执照
            upZhizhaoImage(file) {
                if ((Math.round(file.size / 1024 * 100) / 100) < 3000) {
                    this.caijianImg(file,"zhizhaoImage")
                } else {
                    this.$Notice.error({
                        title: '文件过大',
                        desc: '文件 ' + file.name + '/' + (Math.round(file.size / 1024 * 100) / 100) + 'KB' + '，请上传 3M 以内的图片。',
                        duration: 4.5
                    });
                }
                //禁止默认上传
                return false
            },
            //上传身份证正面
            upIdImageZheng(file) {
                if ((Math.round(file.size / 1024 * 100) / 100) < 3000) {
                    this.caijianImg(file,"idImageZheng")
                } else {
                    this.$Notice.error({
                        title: '文件过大',
                        desc: '文件 ' + file.name + '/' + (Math.round(file.size / 1024 * 100) / 100) + 'KB' + '，请上传 3M 以内的图片。',
                        duration: 4.5
                    });
                }
                //禁止默认上传
                return false
            },
            //上传身份证反面
            upIdImageFan(file) {
                if ((Math.round(file.size / 1024 * 100) / 100) < 3000) {
                    this.caijianImg(file,"idImageFan")
                } else {
                    this.$Notice.error({
                        title: '文件过大',
                        desc: '文件 ' + file.name + '/' + (Math.round(file.size / 1024 * 100) / 100) + 'KB' + '，请上传 3M 以内的图片。',
                        duration: 4.5
                    });
                }
                //禁止默认上传
                return false
            },
            caijianImg(file,name) {
                let reader = new FileReader();
                reader.onload = () => {
                   //转base图片
                    this.upImg(reader.result,name)
                    reader.onload = null;
                };
                reader.readAsDataURL(file);
            },
            upImg(url,name){
                this.$Loading.start();
                this.upBaseImg("admin/upLoadImages",{image:url})
                    .then((res) =>{
                        this.formValidate[name]=res.data.url
                    })
            },
            //提交验证
            subFrom(){
                this.$refs.formValidate.validate((valid) => {
                    if (valid) {
                        //判断是否选取配送区
                        if(this.$refs.tree.getCheckedNodes().length!=0){
                            //判断是否上传图片
                            if(this.formValidate.shopImg==""||this.formValidate.zhizhaoImage==""||this.formValidate.idImageZheng==""||this.formValidate.idImageFan==""){
                                this.$Message.error('请上传图片');
                            }else{
                                //执行上传
                                if(this.isEdit){
                                    this.updataShops()//修改
                                }else{
                                    this.sureSubForm()//添加
                                }
                            }
                        }else{
                            this.$Message.error('请选择配送区');
                        }
                    } else {
                        this.$Message.error('请完善信息');
                    }
                })
            },
            resetForm(){
                this.$refs.formValidate.resetFields();
            },
            //验证通过提交
            sureSubForm(){
                let obj = JSON.parse(JSON.stringify(this.formValidate))
                obj.isSelf= obj.isSelf?1:-1
                this.$set(obj,"longitude",this.lnglat[0])
                this.$set(obj,"latitude",this.lnglat[1])
                this.$set(obj,"peisong",this.$refs.tree.getCheckedNodes().map((value)=>value.areaid).join(","))
                this.loading = true
                this.getJsonData("Shops/addShop",obj,true)
                    .then((res)=>{
                        this.$Message.success("添加成功")
                        this.loading = false
                    })
                    .catch((res)=>{
                        this.loading = false
                    })
            },
            updataShops(){
                let obj = JSON.parse(JSON.stringify(this.formValidate))
                obj.isSelf= obj.isSelf?1:-1
                this.$set(obj,"longitude",this.lnglat[0])
                this.$set(obj,"latitude",this.lnglat[1])
                this.$set(obj,"peisong",this.$refs.tree.getCheckedNodes().map((value)=>value.areaid).join(","))
                this.$set(obj,"shopId",this.$route.query.id)
                this.loading = true
                this.getJsonData("Shops/updataShops",obj,true)
                    .then((res)=>{
                        this.$Message.success(" 修改成功")
                        this.loading = false
                    })
                    .catch((res)=>{
                        this.loading = false
                    })
            }
        }
    }
</script>

<style lang="less">
    @import "add-shop";
</style>